
.wrapper{
	position: relative;
	top: 0px;
	padding: 0 24px 24px;
	padding-top: 24px;
	
}
.wrapper .esun-charts-group {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}

.wrapper .esun-charts-group .esun-box {

	border-radius: 12px;

	padding: 24px;	
	margin-bottom: 16px;
}

.wrapper .esun-charts-group .esun-box .expensecontent{
	position: relative;
	margin-top: 24px;
	width: 100%;
	height: 68px;

	color: #FFFFFF;
	font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
}

.wrapper .esun-charts-group .esun-box .expensecontent .contentleft{
	position: absolute;
	width: 255px;

	height: 100%;
}

.wrapper .esun-charts-group .esun-box .expensecontent .contentleft span{
	font-size: 36px;
	font-family: Helvetica Neue-Medium, Helvetica Neue;
	font-weight: 500;
	line-height: 10px;
}

.wrapper .esun-charts-group .esun-box .expensecontent .contentleft li{
	margin: 0px 0px;
}

.wrapper .esun-charts-group .esun-box .expensecontent .contentright{
	position: absolute;
left: 100%;
margin-left: -224px;
	width: 234px;

height: 100%;

}

.wrapper .esun-charts-group .esun-box .expensecontent .contentright span{
	font-size: 24px;
	font-family: Helvetica Neue-Medium, Helvetica Neue;
	font-weight: 500;
	line-height: 10px;
}

.wrapper .esun-charts-group .esun-box .expensecontent .contentright .rightmoney{
	float: right;
}

.wrapper .esun-charts-group .esun-box .expensebottom{
	margin-top: 63px;
	width: 100%;
	height: 58px;

	color: #FFFFFF;
	font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;

}



.wrapper .esun-charts-group .esun-box .expensebottom .bottomtop{
	position: relative;
    padding-top: 10px;
	/* background-color: rgb(49, 46, 223); */
	width: 160px;
}

.esun-box .expensebottom .bottomtop .rightmoney{
    float: right;
	margin-top: 5px;
}

.esun-box .expensebottom .bottomtop .rightmoney span{
	font-size: 24px;
	font-family: Helvetica Neue-Medium, Helvetica Neue;
	font-weight: 500;
	line-height: 0px;
}

.wrapper .esun-charts-group .esun-box .expensebottom .progress{
	position: relative;
	width: 70%;
height: 19px;
background: rgb(255, 255, 255,0.8);
z-index: 100;
}

.wrapper .esun-charts-group .esun-box .expensebottom .progressline{
	width: 3px;
	height: 25px;
	margin-top: -3px;
	background: rgba(255, 255, 255);
	float: right;
}

.wrapper .esun-charts-group .esun-box .expensebottom .progressunder{
margin-top: -19px;
	position: relative;
	width: 100%;
height: 19px;
background: rgba(189, 255, 219, 0.7);
}

.wrapper .esun-charts-group .esun-box.esun-box-type1 {
	width: calc((100% - 32px)/3);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}



.wrapper .esun-charts-group .esun-box .title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.wrapper .esun-charts-group .esun-box .title div {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.wrapper .esun-charts-group .esun-box .title div.box-name img {
	width: 52px;
	margin-right: 12px;
}

.wrapper .esun-charts-group .esun-box div.box-name h4 {
	color: #1D2129;
	font-size: 20px;
	font-weight: 600;
}
.title .goDetail{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.title .goDetail p{
	color: #1D2129;
	font-size: 14px;
}
.title .goDetail  img{
	width: 18px;
	margin-left: 4px;
}
.wrapper .esun-charts-group .esun-box div.compare {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.wrapper .esun-charts-group .esun-box div.compare img {
	width: 16px;
}

.wrapper .esun-charts-group .esun-box div.compare span {
	font-size: 12px;
	display: inline-block;
	margin: 0 5px;
}

.wrapper .esun-charts-group .esun-box div.compare.rise span {
	color: #00B42A;
}

.wrapper .esun-charts-group .esun-box div.compare.decline span {
	color: #F53F3F;
}
.wrapper .esun-charts-group .esun-box div.compare.fair span {
	color: #165DFF;
}
.wrapper .esun-charts-group .esun-box div.compare p {
	color: #86909C;
	font-size: 12px;
}

.wrapper .esun-charts-group .esun-box.esun-box-type1 .money {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.wrapper .esun-charts-group .esun-box h2 {
	color: #1D2129;
	font-size: 32px;
	font-weight: 600;
}

.wrapper .esun-charts-group .esun-box h2 span,
.wrapper .esun-charts-group .esun-box h4 span,
.wrapper .esun-charts-group .esun-box h5 span {
	color: #86909C;
	font-size: 12px;
	font-weight: normal;
	margin-left: 5px;
	display: inline-block;
}

.wrapper .esun-charts-group .esun-box h4,
.wrapper .esun-charts-group .esun-box h5 {
	color: #1D2129;
	font-size: 24px;
	font-weight: 600;
}
.wrapper .esun-charts-group .esun-box i{
	color: #4E5969;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
}
.wrapper .esun-charts-group .esun-box i.big{
	font-size: 14px;
}

.wrapper .esun-charts-group .esun-box em{
	color: #1D2129;
	font-size: 14px;
	font-style: normal;
}
.wrapper .esun-charts-group .esun-box em.big{
	font-size: 16px;
}

.wrapper .esun-charts-group .esun-box.esun-box-type1 h5 {
	font-size: 16px;
	margin-top: 7px;
}
.wrapper .esun-charts-group .esun-box.esun-box-type1 .esun-box-content1{
	width: 100%;
	height: 120px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 10px;
}
.wrapper .esun-charts-group .esun-box.esun-box-type1 .esun-box-content2 {
	width: 100%;
	height: 120px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.wrapper .esun-charts-group .esun-box.esun-box-type1 .esun-box-content2 .figure>div{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.wrapper .esun-charts-group .esun-box.esun-box-type1 .esun-box-content2 .figure>div .compare{
	margin-left: 8px;
}

.payee {
	width: 45%;
	position: relative;
	padding-left: 20px;
	padding-bottom: 7px;
}

.payee::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;
	background: #E5E6EB;
}
.wrapper .esun-charts-group .esun-box.esun-wrapper{
	width: 100%;
	padding-top: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
.wrapper .esun-charts-group .esun-box.plan{
	background: rgba(124, 161, 254, .06);
}
.wrapper .esun-charts-group .esun-box.receive{
	background: rgba(77, 200, 250, .06);
}
.wrapper .esun-charts-group .esun-box.expense{
	background: rgba(119, 110, 251, .06);
	color: #bce0cc;
}
.wrapper .esun-charts-group .esun-box.esun-wrapper .title{
	width: 100%;
	padding: 16px 0;
}
.wrapper .esun-charts-group .esun-box.plan .esun-box{
	margin: 0;
	width: calc((100% - 16px)/2);
}

#monthlybudget{
	/* background-color: rgb(207, 18, 18); */
	width: 100%;
	height: 100%;

}

.wrapper .esun-charts-group .esun-box .esun-box-type2{
	width: calc((100% - 16px)*.43);
}
.wrapper .esun-charts-group .esun-box .esun-tag{
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0;
	padding: 0;
	position: relative;
}
.wrapper .esun-charts-group .esun-box .esun-box-type3 {
	width: calc((100% - 16px)*.57);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#quarterbudget{
	width: 100%;
	height: 100%;
}

#abcd{
	width: 110%;
	height: 110%;
}


.esun-box .esun-tag::after{
	content: '';
	position: absolute;
	top: 20px;
	left: 50%;
	width: 1px;
	height: calc(100% - 40px);
	border-left: 1px dashed #E5E6EB;
}
.esun-box .esun-tag::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 20px;
	width: calc(100% - 40px);
	height: 1px;
	border-bottom: 1px dashed #E5E6EB;
}
.esun-box .esun-tag>div{
	width: 50%;
	padding: 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.esun-box .esun-tag>div img{
	width: 64px;
}
.esun-box .esun-tag>div em{
	margin-top: 20px;
}
.esun-box .esun-tag>div h2{
	margin: 4px 0 8px;
}
.esun-box .caption {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.esun-box .schedule{
	width: 100%;
	background-color: #ffffff;

}

.wrapper .esun-charts-group .esun-box .caption h2 {
	color: #1D2129;
	font-size: 20px;
	font-weight: 600;
}

.esun-box .caption span{
	font-size: 14px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #4E5969;
}

.esun-box .caption time {
	color: #86909C;
	font-size: 14px;
}

.esun-box .caption select {
	border: none;
	color: #1D2129;
	font-size: 14px;
	font-weight: 600;
}

select:focus-visible {
	outline: none;
}



.esun-box-type3 .left {
	width: 40%;
}

.esun-box-type3 .left .figure {
	height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.esun-box-type3 .left .figure h2 {
	color: #1D2129;
	font-size: 32px;
	font-weight: 600;
	margin: 2px 0 8px;
}

.esun-box-type3 .left .figure h2 span {
	color: #86909C;
	font-size: 12px;
	font-weight: normal;
	display: inline-block;
	margin-left: 5px;
}
.esun-box-type3 .right{
	width:60% ;
}
.esun-box-type3 .right .rate h3{
	color: #1D2129;
	font-size: 16px;
	font-weight: 600;
}
.esun-box-type3 .right .rate h2{
	color: #1D2129;
	font-size: 24px;
	font-weight: 600;
}
.esun-box-type3 .right .rate>div{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.esun-box-type3 .right .rate .compare{
	padding: 2px 8px;
	border-radius: 20px;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-left: 7px;
}
.esun-box-type3 .quarter{
	width: 100%;
	display: flex;
	flex-direction: row;
	padding-top: 32px;
	border-top:1px solid  #E5E6EB;
}
.esun-box-type3 .quarter>div{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-left: 10px;
}
.esun-box-type3 .quarter>div .quarterChart{
	width: 70px;
	height: 70px;
}
.esun-box-type3 .quarter>div .figure p{
	color: #4E5969;
	font-size: 12px;
}
.esun-box-type3 .quarter>div .figure h3{
	color: #1D2129;
	font-size: 24px;
	font-weight: 600;
}
.esun-box-type3 .quarter>div .figure h3 span{
	color: #86909C;
	font-size: 12px;
	font-weight: normal;
}
.esun-box-type3 .quarter>div:first-child{
	padding-left: 0;
}
.esun-box-type3 .quarter>div{
	width: 25%;
	position: relative;
}
.esun-box-type3 .quarter>div::after{
	content: '';
	position: absolute;
	top: 0;
	right: 10px;
	width: 1px;
	height: 100%;
	background: #E5E6EB;
}
.esun-box-type3 .quarter>div:last-child::after{
	width: 0;
}
.wrapper .esun-charts-group .esun-box-type3 .right .rate .compare img{
	width: 12px;
}
.wrapper .esun-charts-group .esun-box-type3 .right .rate .compare span{
	font-size: 12px;
	margin: 0;
}
.esun-box-type3 .right .rate .compare.rise{
	background: #E8FFEA;
}
.esun-box-type3 .right .rate .compare.rise span{
	color: #00B42A;
}
.esun-box-type3 .right .rate .compare.decline{
	background: #FFECE8;
}
.esun-box-type3 .right .rate .compare.decline span{
	color: #F53F3F;
}
.esun-box-type3 .right .rate .compare.fair{
	background: #E6F4FE;
}
.esun-box-type3 .right .rate .compare.fair span{
	color: #165DFF;
}
.wrapper .esun-charts-group .esun-box-type4{
	width: 100%;
	margin-bottom: 0;
}
.esun-box-type5 .content{
	display: flex;
	flex-direction: row;
	margin-top: 25px;
}
.esun-box-type5 .content .left{
	width: calc(100% - 200px);
}
.esun-box-type5 .content .right{
	width: 200px;
	height: 240px;
	background: url(../images/home/bg-gongshi@2x.png) no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20px;
}
.esun-box-type5 .content .right .icon{
	background: rgba(22, 93, 255, 0.1);
	border-radius: 4px;
	width: 38px;
	height: 38px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.esun-box-type5 .content .right .icon img{
	width: 22px;
}
.esun-box-type5 .content .right .figure h2{
	color: #1D2129;
	font-size: 36px;
	font-weight: 600;
}
.esun-box-type5 .content .right .figure h2 span{
	color: #86909C;
	font-size: 14px;
	display: inline-block;
	margin-left: 4px;
}
.esun-box-type5 .content .right .figure p{
	color: #4E5969;
	font-size: 14px;
}

#progressBar{
	height: 30px;
}

#implementation{
	width: 100px;
	height: 120px;
}

#executeRate,#fiveRate,#executeRate1,#executeRate2{
	width: 100%;
	height: 280px;
}

#condition {
	width: 100%;
	height: 360px;
}
.esun-box-type4 .content{
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 20px;
}
.esun-box-type4 .content .left{
	width: 50%;
	
}
.esun-box-type4 .content .right{
	width: 50%;
	height: 240px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.esun-box-type4 .content .right div{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-left: 40px;
	position: relative;
}
.esun-box-type4 .content .right div::after{
	content:'';
	position: absolute;
	top: 15%;
	left: 25px;
	width: 4px;
	height: 70%;
	border-radius: 10px;
}
.esun-box-type4 .content .right div:nth-child(1)::after{
	background: #165DFF;
}
.esun-box-type4 .content .right div:nth-child(2)::after{
	background: #249EFF;
}
.esun-box-type4 .content .right div:nth-child(3)::after{
	background: #846BCE;
}
.esun-box-type4 .content .right div:nth-child(4)::after{
	background: #21CCFF;
}
.esun-box-type4 .content .right div:nth-child(5)::after{
	background: #86DF6C;
}
.esun-box-type4 .content .right div:nth-child(6)::after{
	background: #00B3A1;
}
.esun-box-type4 .content .right div p{
	color: #4E5969;
	font-size: 14px;
}
.esun-box-type4 .content .right div h3{
	color: #1D2129;
	font-size: 20px;
	font-weight: 600;
}
.esun-box-type4 .content .right div h3 span{
	color: #86909C;
	font-size: 12px;
}
#ofSituation,#direct,#dkCondition{
	width: 100%;
	height: 240px;
}

.viewCondition{
	width: 100%;
	margin-top: 10px;
}
.viewCondition a{
	background: #F7F8FA;
	padding: 6px 14px;
	border-radius: 4px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.viewCondition p{
	color: #1D2129;
	font-size: 14px;
}
.viewCondition  img{
	width: 16px;
}